<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户登录</title>
    <!-- CSS -->
    <!-- <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500"> -->
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/form-elements.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/body.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>

    <![endif]-->

    <!-- Favicon and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.png">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>

</head>
<body>
<div class="container">
    <section id="content">
        <form role="form" action="${pageContext.request.contextPath}/login" method="post" class="login-form">
            <h1>用户登录</h1>
            <div>
                <input type="text" placeholder="邮箱" required="" name="userName" id="userName" />
            </div>
            <div>
                <input type="password" placeholder="密码" required="" name="passWord" id="passWord" />
            </div>
            <div class="">
                <input type="" id="captcha" name="captcha" class="text" maxlength="10" style="height: 40px" />
                <img id="captchaImage" src="${pageContext.request.contextPath}/captcha"/>
                <span class="help-block u-errormessage" id="js-server-helpinfo">&nbsp;</span>			</div>
            <div>
                <input type="radio" name="optionsRadios"
                       value="1" checked> 教师登录
                <input type="radio" name="optionsRadios"
                       value="2" checked> 学生登录
                <input type="radio" name="optionsRadios"
                       value="3" checked> 管理员登录

            </div>
            <div>

                <!-- <input type="submit" value="Log in" /> -->
                <input type="submit" value="登录" class="btn btn-primary" id="js-btn-login"/>
                <a href="#">忘记密码?</a>
                <!-- <a href="#">Register</a> -->
            </div>
        </form><!-- form -->

    </section><!-- content -->
</div>

</body>
</html>
<script>
    // 更换验证码
    $('#captchaImage').click(function()
    {
        $('#captchaImage').attr("src", "${pageContext.request.contextPath}/captcha?timestamp=" + (new Date()).valueOf());

    });
</script>